<script setup>
import api from '@/api';
import utils from '@/utils';
import MyContainer from '@/views/MyContainer.vue';
import { computed, onMounted, ref } from 'vue';
const tableData = ref([]);


const isInEditMode = computed(() => {
  return tableData.value.some(item => item.mode === 'edit');
})

const handleAdd = () => {
  tableData.value.unshift(
    {
      mode: 'edit',
      name: '',
      host: '',
      port: '22',
      username: '',
      password: ''

    }
  );
};

const handleEdit = async (row) => {
  row.mode = 'edit';
};

const handleSave = async (row) => {
  if (!row.name) {
    utils.message.warning('请填写名称');
    return;
  }
  if (!row.host) {
    utils.message.warning('请填写ip');
    return;
  }
  const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  if (!ipRegex.test(row.host)) {
    utils.message.warning('请填写正确的ip');
    return;
  }

  if (!row.port) {
    utils.message.warning('请填写ssh端口');
    return;
  }
  const positiveIntegerRegex = /^[1-9]\d*$/;
  if (!positiveIntegerRegex.test(row.port)) {
    utils.message.warning('请填写正确的ssh端口');
    return;
  }
  if (!row.username) {
    utils.message.warning('请填写用户名');
    return;
  }
  if (!row.password) {
    utils.message.warning('请填写密码');
    return;
  }
  if (!!row.id) {
    await api.sshTunnel.editSshTunnel(row);
  } else {
    await api.sshTunnel.addSshTunnel(row);
  }
  utils.message.success('保存成功');
  search();
  row.mode = 'view';
};

const handleCancel = (row) => {
  search();
  row.mode = 'view';
};

const handleDelete = async (row) => {
  await utils.message.confirm('是否确认删除');
  await api.sshTunnel.deleteSshTunnel(row.id);
  utils.message.success('删除成功');
  search();
};

const search = async () => {
  const res = await api.sshTunnel.getSshTunnelList();
  tableData.value = res.data;
};

onMounted(() => {
  search();
});

</script>

<template>
  <div class="home-add-ssh">
    <MyContainer>
      <template #form>
        <el-form label-width="auto">
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="handleAdd" :disabled="isInEditMode">
              新增隧道
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #table>
        <el-table :data="tableData" stripe border>
          <el-table-column prop="name" label="隧道名称" min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.name" v-if="row.mode === 'edit'" size="small" />
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="host" label="ip" width="150">
            <template #default="{ row }">
              <el-input v-model="row.host" v-if="row.mode === 'edit'" size="small" />
              <span v-else>{{ row.host }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="port" label="ssh端口" width="100">
            <template #default="{ row }">
              <el-input v-model="row.port" v-if="row.mode === 'edit'" size="small" />
              <span v-else>{{ row.port }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="120">
            <template #default="{ row }">
              <el-input v-model="row.username" v-if="row.mode === 'edit'" size="small" />
              <span v-else>{{ row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="password" label="密码" width="200">
            <template #default="{ row }">
              <el-input v-model="row.password" v-if="row.mode === 'edit'" type="password" size="small"
                :show-password="true" />
              <span v-else>***</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <div class="action-wrap">
                <template v-if="row.mode === 'edit'">
                  <el-link :underline="false" @click="handleSave(row)" icon="Check" type="primary" size="small">
                    保存
                  </el-link>
                  <el-link :underline="false" @click="handleCancel(row)" icon="Close" type="info" size="small">
                    取消
                  </el-link>
                </template>
                <template v-else>
                  <el-link :underline="false" @click="handleEdit(row)" icon="Edit" type="primary" size="small"
                    :disabled="isInEditMode">
                    编辑
                  </el-link>
                  <el-link :underline="false" @click="handleDelete(row)" icon="Delete" type="danger" size="small"
                    :disabled="isInEditMode">
                    删除
                  </el-link>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </MyContainer>
  </div>
</template>

<style scoped lang="scss">
.home-add-ssh {
  height: 400px;

  .action-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
</style>
